<template>
  <div class="tree-item">
    <template v-if="node.type === 'folder'">
      <div class="folder" @click="toggleFolder(node)">
        <i :class="node.expanded ? 'el-icon-folder-opened' : 'el-icon-folder'"></i>
        <span>{{ node.name }}</span>
      </div>
      <div class="sub-files" v-if="node.expanded">
        <file-node
          v-for="(child, index) in node.children"
          :key="index"
          :node="child"
          @show-file-content="showFileContent"
          @toggle-folder="toggleFolder"
        />
      </div>
    </template>
    <template v-else>
      <div class="file" @click="showFileContent(node)">
        <i class="el-icon-document"></i>
        <span>{{ node.name }}</span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'fileNode',
  props: {
    node: {
      type: Object,
      required: true,
    },
  },
  methods: {
    toggleFolder(folder) {
      this.$emit('toggle-folder', folder);
    },
    showFileContent(file) {
      this.$emit('show-file-content', file);
    },
  },
};
</script>

<style scoped>
.tree-item {
    margin: 5px 0;
}

.folder, .file {
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
}

.folder:hover, .file:hover {
    background-color: #f5f5f5;
}

.folder i, .file i {
    margin-right: 5px;
}

.sub-files {
    margin-left: 20px;
}
</style>
